import React, { Component } from 'react'
import avatar from './images/avatar.png'
import dayjs from 'dayjs'

export default class App extends Component {
  state = {
    // 添加
    /*
    1.定义一个变量
    2.与表单中的value进行绑定
    */
    comment: '',
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    active: 'time',
    list: [
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: '2021-11-10 09:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1,
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '听妈妈的话',
        time: '2021-12-11 09:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0,
      },
      {
        id: 3,
        author: '陈奕迅',
        comment: '十年',
        time: '2021-10-11 10:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1,
      },
    ],
  }
  handleTabChange = (active) => {
    return () => {
      this.setState({
        active,
      })
    }
  }
  HandleDel = (id) => {
    // filter：如果返回true则保留，falseb不保留
    // 这里表示：item.id 不等于 id时，保留，item.id 等于 id时 删除
    this.setState({
      list: this.state.list.filter(item => item.id !== id)
    })
  }
  handleZan(id, attitude) {
    this.setState({
      list: this.state.list.map((item) => {
        if (item.id === id) {
          // 找到了要修改的那一项，只改 attribute
          return {
            ...item,
            attitude,
          }
        } else {
          /* return {
            ...item,
          } */
          return item
        }
      }),
    })
  }
renderlist() {
  const { list } = this.state
  return list.length === 0 ? <h3>暂无评论</h3> :
    list.map((item) => (
      <div className='list-item' key={item.id}>
        <div className='user-face'>
          <img className='user-head' src={item.img} alt='' />
        </div>
        <div className='comment'>
          <div className='user'>{item.author}</div>
          <p className='text'>{item.comment}</p>
          <div className='info'>
            <span className='time'>{item.time}</span>
            {/* 如果是 1，表示已经赞了，再点一下，期望变成 0 来取消点赞，否则应该是 1 来点赞 */}
            <span
              className={item.attitude === 1 ? 'like liked' : 'like'}
              onClick={() =>this.handleZan(item.id, item.attitude === 1 ? 0 : 1)}
            >
              <i className='icon'></i>
            </span>
            <span
              className={item.attitude === -1 ? 'hate hated' : 'hate'}
            
              onClick={() =>this.handleZan(item.id, item.attitude === -1 ? 0 : -1)}
            >
              <i className='icon'></i>
            </span>
            <span className='reply btn-hover' onClick={() => this.HandleDel(item.id)}>删除</span>
          </div>
        </div>
      </div>
    ))
}
handleChange = (e) => {
  this.setState({
    comment: e.target.value
  })
}
handleSubmit = () => {
  if (this.state.comment.trim().length === 0) {
    return alert('不能为空')
  }
  const newComment = {
    id: Date.now(),
    author: 'rors',
    comment: this.state.comment,
    time: dayjs(new Date()).format('YYYY-MM-DD HH-mm-ss'),
    img: avatar,
    // 1: 点赞 0：无态度 -1:踩
    attitude: 0,
  }
  this.setState({
    list: [newComment, ...this.state.list],
    comment: ''
  })
}
render() {
  const { list, tabs, active, comment } = this.state
  return (
    <div className='App'>
      <div className='comment-container'>
        <div className='comment-head'>
          <span>{list.length} 评论</span>
        </div>
        <div className='tabs-order'>
          <ul className='sort-container'>
            {tabs.map((item) => (
              <li className={item.type === active ? 'on' : ''} key={item.id}
                onClick={this.handleTabChange(item.type)}>
                按{item.name}排序
              </li>
            ))}
          </ul>
        </div>
        <div className='comment-send'>
          <div className='user-face'>
            <img className='user-head' src={avatar} alt='' />
          </div>
          <div className='textarea-container'>
            <textarea
              cols='80'
              rows='5'
              placeholder='发条友善的评论'
              className='ipt-txt'
              value={comment}
              onChange={this.handleChange}
            ></textarea>
            <button className='comment-submit' onClick={this.handleSubmit}>发表评论</button>
          </div>
          <div className='comment-emoji'>
            <i className='face'></i>
            <span className='text'>表情</span>
          </div>
        </div>
        <div className='comment-list'>
          {this.renderlist()}

        </div>
      </div>
    </div>
  )
}
}